<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>G2E</title>

		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style type="text/css">
			body {
				height: 100vh;
				background: #405F9E;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="mainWrap">

			<div class="mainBox" id="main">
				<div class="mainBox-hd">
					<div class="left-content">
						<div class="tit-head">
							<img src="img/logo.png" alt="" class="logo">
							<div class="title-bd">
								<h3 class="title">G2 Logistics Technology Co., Ltd</h3>
								<p class="sub-title">Internet technology companies with output platform capability and big data enabled</p>
							</div>
						</div>
						<div class="tit-content">
							<p>Internet technology companies and platform business management companies that enable small and medium-sized
								businesses based on big data through technology driven inter chain of logistics elements, output platform
								capability</p>
							<p>Internet technology companies and platform business management companies that enable small and medium-sized
								businesses based on big data through technology driven inter chain of logistics elements, output platform
								capability</p>
						</div>
						<div class="search-box">
							<div class="input-box">
								<input class="input" type="text" name="" id="" value="" placeholder="Enter waybill number + 4-digit zip code of delivery address" />
								<img src="img/search.png" class="search-btn" id="search">
							</div>
							<div class="search-cont">
								<p>Cargo status: being sent to Hefei City, Anhui Province</p>
							</div>
						</div>
						<div class="copyright">Copyright © 2020 G2物流 All rights reserved. </div>
					</div>
					<div class="right-content">
						<div class="logn-btn">
							<span class="btn" id="showLogin">Sign in</span>
						</div>
						<!-- 时钟 -->
						<ul class="time-box">

							<li class="time-cell">
								<div class="time-clock">
									<canvas class="clock" id="clock" width="130" height="130"></canvas>
								</div>
								<p class="time"></p>
								<p class="city">Perth</p>
							</li>
							<li class="time-cell">
								<div class="time-clock">
									<canvas class="clock" id="clock" width="130" height="130"></canvas>

								</div>
								<p class="time "></p>
								<p class="city">Sydney Melbourne Brisbane</p>
							</li>
							<li class="time-cell">
								<div class="time-clock">
									<canvas class="clock" id="clock" width="130" height="130"></canvas>

								</div>
								<p class="time "></p>
								<p class="city">Adelaide</p>
							</li>
						</ul>
						<!-- 日历 -->
						<div class="calendar-box">
							<table class="calendar-table">
								<caption id="calendar-month"></caption>
								<tr>
									<th>Sun</th>
									<th>Mon</th>
									<th>Tue</th>
									<th>Wed</th>
									<th>Thu</th>
									<th>Fri</th>
									<th>Sat</th>
								</tr>
								<tr id="weekday">
									<td><span class="day "></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
								</tr>
								<tr>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
								</tr>
								<tr>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
								</tr>
								<tr>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
								</tr>
								<tr>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
								</tr>
								<tr>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
									<td><span class="day"></span></td>
								</tr>
							</table>
						</div>
						<!-- 公共假期 -->
						<div class="holiday-box">
							<ul class="holiday-list">
								<li class="holiday-cell">Public holidays:Sunday, December 6</li>
								<li class="holiday-cell">Public holidays:Monday, December 7</li>
								<li class="holiday-cell">Public holidays:Saturday, December 8</li>
								<li class="holiday-cell">Public holidays:Saturday, December 24</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 登录 -->
				<div class="login-wrap">
					<div class="mask"></div>
					<div class="login-content">
						<h3 class="stytem-title">G2 Online Management System</h3>
						
						<div class="login-content-hd">
							<h3 class="title">Login in</h3>
							<img src="img/close.png"  class="close-btn" id="closeLoginM">
							<div class="input-form">
								<img src="img/user.png" class="icon">
								<input type="text" class="input" name="" id="" value="" placeholder="Username" />
							</div>
							<div class="input-form">
								<img src="img/password.png" class="icon">
								<input type="password" class="input" name="" id="" value="" placeholder="Password" />
							</div>

							<div class="auth_agreen">
								<input id="select_all" name="select_all" type="checkbox" checked />
								<label for="select_all"><i></i>I agree G2E's teams and conditions</label>

							</div>
							<div class="ph-btn-group">
								<a href="#" class="btn disable">
									Login
								</a>
								<a href="#" class="btn">
									Get a Quote as Guest
								</a>
								<a href="#" class="btn">
									Consulting
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>


		</div>

		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/scale.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/clock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/calendar.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#search').click(function() {
					console.log(111)
					$('.search-cont').show();
				});
				//当月公共假期日期
				var everyday = $('.day');
				var holidayARR = [6, 7, 8, 24];
				$('.day').each(function(i) {
					var text = $(this).text();
					var that = $(this);
					//console.log($(this).text());
					for (var j = 0; j < holidayARR.length; j++) {

						if (holidayARR[j] == text) {
							that.addClass('active');
						}


					}
				});
				$('#closeLoginM').click(function(){
					
					$('.login-wrap').hide();
				});
				$('#showLogin').click(function(){
					$('.login-wrap').show();
				});

			})

			// 时间设置
			var timezone = [8, 10, 9.5]; // 时区 ： 东区时区1~12 西区时区-1~-12
			var date;
			window.onload = function() {
				// 调用时间
				var setdate = setInterval(() => {
					for (var i = 0; i < timezone.length; i++) {
						//console.log(getLocalTime(timezone[i]).toString());
						date = dateFormat(" HH:MM", getLocalTime(timezone[i]));
						//console.log(date);
						$(".time").eq(i).html(date);
					}

				}, 1000);

			};
			// 调用时间end
		</script>
	</body>
</html>
